<script setup>
import * as echarts from 'echarts';
import {onMounted, ref} from "vue";
import * as myChart from "echarts";
import emitter from "@/utils/buts";
import {useBlackSotre} from "@/stores/black";
import * as XLSX from "xlsx";
const isBlack = useBlackSotre()
const isDownload = ref(false)
const month = ref(1)
const query = ref(1)
const columns1 = [
  {
    value: 12,
    groupId: '员工请假审批'
  },
  {
    value: 10,
    groupId: '员工出差经费审批'
  },
  {
    value: 5,
    groupId: '员工日常办公用品审批'
  },
  {
    value: 3,
    groupId: '员工工资审批'
  },
  {
    value: 2,
    groupId: '员工活动审批'
  }
]
const columns2 = [
  {
    value: 23,
    groupId: '10'
  },
  {
    value: 20,
    groupId: '11'
  },
  {
    value: 10,
    groupId: '12'
  },
  {
    value: 5,
    groupId: '1'
  },
  {
    value: 3,
    groupId: '2'
  },
  {
    value: 2,
    groupId: '3'
  },

]
const columns3 = [
  { value: 50, name: '审批通过' },
  { value: 10, name: '审批拒绝' },
  { value: 4, name: '正在审批' },
]

const exportToExcel = (name,wsData) => {
  // 创建工作簿
  const wb = XLSX.utils.book_new();
  // 创建工作表
  const ws = XLSX.utils.aoa_to_sheet(wsData);
  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(wb, ws, name);
  // 生成文件 buffer
  const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
  // 创建 Blob 并触发下载
  const blob = new Blob([wbout], { type: 'application/octet-stream' });
  saveAs(blob, name+`企业数据_${new Date().toISOString().slice(0,10)}.xlsx`);
};
const getData1 =async () =>{
  let columns = []
  columns1.forEach((column) => {
    columns.push({审批名称:column.groupId, 审批数量:column.value})
  })
  let wsData1 = [
    ["审批名称","审批数量"], // 表头
    ...columns.map((item,wsData1) => [item.审批名称, item.审批数量]) // 数据行
  ];
  exportToExcel("历史审批数量排名表",wsData1);
}
const getData2 =async () =>{
  let columns = []
  columns2.forEach((column) => {
    columns.push({月份:column.groupId, 审批数量:column.value})
  })
  let wsData1 = [
    ["月份","审批数量"], // 表头
    ...columns.map((item,wsData1) => [item.月份, item.审批数量]) // 数据行
  ];
  exportToExcel("历史月份审批数量表",wsData1);
}
const getData3 =async () =>{
  let columns = []
  columns3.forEach((column) => {
    columns.push({审批结果:column.name, 审批数量:column.value})
  })
  let wsData1 = [
    ["审批结果","审批数量"], // 表头
    ...columns.map((item,wsData1) => [item.审批结果, item.审批数量]) // 数据行
  ];
  exportToExcel("历史审批结果统计表",wsData1);
}
const closeDia=()=>{
  query.value=ref(null)
  month.value=ref(null)
}
// 绘制图表
onMounted(()=>{
  var chartDom = document.getElementById('main1');
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    title: {
      text: '个人审批项目数量前五排名表',
      top: '10px',
      left: '25px',
      style: {
        color: 'red',
        showBackground: true,
        backgroundStyle: {color:'red'}
      },
    },
    tooltip: {
      trigger: 'item'
    },
    toolbox: {
      show: true,
      orient: "vertical",
      left: "140vh",
      top: "27vh",
      borderRadius: 5,
      feature: {
        saveAsImage: { show: true },
      },
    },
    xAxis: {
      type: 'category',
      data: ['员工请假审批', '员工出差经费审批', '员工日常办公用品审批','员工工资审批','员工活动审批'],
      axisLabel: {
        interval:0,
        rotate:-40,//此行与上一行作用在于使得X轴坐标倾斜，避免X轴坐标较多无法显示
        inside: false,//将图形中的字移到图形外边
        fontSize:8//调整坐标轴字体大小
      },
    },
    yAxis: {},
    dataGroupId: '',
    animationDurationUpdate: 500,
    series: {
      type: 'bar',
      id: 'sales',
      data: columns1,
      color:'#5F7D53',
      universalTransition: {
        enabled: true,
        divideShape: 'clone'
      },
      showBackground: true,
      backgroundStyle: {
        color: 'block'
      }
    }
  };

  var chartDom2 = document.getElementById('main2');
  var myChart2 = echarts.init(chartDom2);
  var option2;
  option2 = {
    title: {
      text: '个人过去六个月审批数量统计表',
      top: '10px',
      left: 'center',
      style: {
        color: 'red',
        showBackground: true,
        backgroundStyle: {color:'red'}
      },
    },
    tooltip: {
      trigger: 'item',
    },
    toolbox: {
      show: true,
      orient: "vertical",
      left: "150vh",
      top: "27vh",
      borderRadius: 5,
      feature: {
        saveAsImage: { show: true },
      },
    },
    xAxis: {
      type: 'category',
      data: ['10', '11', '12','1','2','3'],
      axisLabel: {
        interval:0,
        inside: false,//将图形中的字移到图形外边
        fontSize:10,
        formatter: function (value) {
          return value + ' 月'; //单位
        }
      },
    },
    yAxis: {},
    dataGroupId: '',
    animationDurationUpdate: 500,
    series: {
      type: 'line',
      id: 'sales',
      data: columns2,
      color:'#B66B26',
      universalTransition: {
        enabled: true,
        divideShape: 'clone'
      },
      showBackground: true,
      backgroundStyle: {
        color: 'block'
      }
    }
  };

  var chartDom3 = document.getElementById('main3');
  var myChart3 = echarts.init(chartDom3);
  var option3;
  option3 = {
    title: {
      text: '个人累计审批通过情况统计',
      left: 'center',
      top: '15px'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      bottom: '2%',
    },
    toolbox: {
      show: true,
      orient: "vertical",
      left: "150vh",
      top: "37vh",
      borderRadius: 5,
      feature: {
        saveAsImage: { show: true },
      },
    },
    series: [
      {
        name: '通过比例',
        type: 'pie',
        radius: '50%',
        data: columns3,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  option && myChart.setOption(option);
  option2 && myChart2.setOption(option2);
  option3 && myChart3.setOption(option3);
  const addEventListener=(e)=>{
    // 释放资源
    myChart.dispose();
    myChart2.dispose();
    myChart3.dispose();
    // 重新渲染图表

    myChart = echarts.init(chartDom,e);
    myChart2 = echarts.init(chartDom2,e);
    myChart3 = echarts.init(chartDom3,e);
    option && myChart.setOption(option);
    option2 && myChart2.setOption(option2);
    option3 && myChart3.setOption(option3);
  }
  emitter.on("chart", (data) => {
    addEventListener(data); //需要调用的方法
  });

})
onMounted(()=>{
  if (isBlack.black===false){
    emitter.emit('chart','light')
  }
})

</script>

<template>
  <div id="chart">
  <p id="main1" style="width: 40vh;height: 45vh;"></p>
  <p id="main2" ></p>
  <p id="main3" ></p>
    <el-button style="margin-left: 130vh;margin-top: 1vh" @click="isDownload = true">点击保存数据到本地</el-button>
  </div>
  <el-dialog
      v-model="isDownload"
      width="400"
      title="下载数据"
      :before-close="closeDia()"
  >
    <el-card class="overview-card" header="保存历史审批数据">
      <el-input-number min:min="1" :max="10000" v-model="query" style="width: 240px" placeholder="请输入保存排名数"></el-input-number>
      <el-button @click="getData1" style="margin-left: 2vh">下载</el-button>
    </el-card><br>
    <el-card class="overview-card" header="保存过去月份审批数据">
      <el-input-number min:min="1" :max="1000" v-model="month" style="width: 240px" placeholder="请输入保存月数"></el-input-number>
      <el-button @click="getData2" style="margin-left: 2vh">下载</el-button>
    </el-card><br>
    <el-card class="overview-card" header="保存企业审批通过类型数据">
      <el-button @click="getData3">下载</el-button>
    </el-card>
  </el-dialog>
</template>

<style scoped lang="scss">
#chart {
margin-left: 30vh;
  width: 135vh;
  height: 55vh;
  margin-top: 4vh;
  border-radius: 10px;
}
#main1{
  margin-left: 8vh;
  border-radius: 10px;
}
#main2{
  width:  40vh;height:  45vh;margin-top: -47vh;
  margin-left: 56vh;
  border-radius: 10px;
}
#main3{
  width:  42.5vh;height:  45vh;margin-top: -47vh;
  margin-left: 104vh;
  border-radius: 10px;
}
</style>